<template>
    <div id="upload">
        <back Title="" operation="确定" @operationClick=uploadFiles></back>
           <div class="cell">
                <van-field
                v-model="fieldValue"
                is-link
                readonly
                label="分类"
                placeholder="请选择类型"
                @click="show = true"
                />
                <van-popup v-model="show" round position="bottom">
                <van-cascader
                    v-model="cascaderValue"
                    title="请选择类型"
                    :options="options"
                    @close="show = false"
                    @finish="onFinish"
                />
                 </van-popup>
           </div>
        <div class="upimg">
                   
            <el-upload
            action
            list-type="picture-card"
            :on-change="fileChange"
            :file-list="fileList" 
            :auto-upload="false">
                <i slot="default" class="el-icon-plus"></i>

                <div slot="file" slot-scope="{file}">
                    <img
                        class="el-upload-list__item-thumbnail"
                        :src="file.url" alt=""
                    >
                    <span class="el-upload-list__item-actions">
                        <span
                        class="el-upload-list__item-preview"
                         @click="handlePictureCardPreview(file)"
                        >
                        <i class="el-icon-zoom-in"></i>
                        </span>
                    
                        <span
                            v-if="!disabled"
                            class="el-upload-list__item-delete"
                            @click="handleRemove(file)"
                        >
                        <i class="el-icon-delete"></i>
                        </span>
                    </span>
                </div>
                
            </el-upload>

            <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="">
            </el-dialog>
        </div>
    </div>
</template>

<script>
import Back from "../components/back.vue"

import { UPLoadFileList } from  "../api/Pictures"
import { getList } from "../api/Catalogue"

import {Toast} from "vant"

export default {
    name: 'Upload',
    components:{
        Back
    },
    data() {
        return {
            show: false,
            fieldValue: "",
            fieldID:-1,
            cascaderValue: '',
            options: [],

            dialogImageUrl: '',
            dialogVisible: false,
            disabled:false,
            fileList:[],//上传的图片数组
            imgsName:[],//图片的名称
        };
    },

    mounted() {
       this.mian()
    },

    methods: {
        //删除时调用

     handleRemove(file, fileList) {

        this.fileList = this.fileList.filter((item) => {
            return item !== file 
        })
        this.imgsName=this.imgsName.filter((item)=>{
            return item !=file.raw.name
        })
    },

      //放大显示
      handlePictureCardPreview(file) {  
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },

        //添加
    fileChange(file, fileList) {
        this.imgsName.push(file.raw.name)
        this.fileList.push(file) ;
        
    },
    //确认上传
    async uploadFiles(){   

            if(this.fieldID==-1){
               Toast('要不我们选一下图片的类型呗。');
            }else{
                let formData=new FormData
                this.fileList.map(item=>{
                    formData.append("file",item.raw) 
                    formData.append("catalogueID",this.fieldID) 
                })
                let {data}= await UPLoadFileList({
                    formData,
                    
                })

                if (data.code===200) {
                    
                    data.data.forEach(name => {
                        this.imgsName=this.imgsName.filter((item)=>{
                            return  item!=name
                        })
                    });

                    this.fileList=[]
                    
                    if(this.imgsName.length!==0){
                        alert(this.imgsName)
                    }
                }
            
            }      
    },
    
    //进入触发的请求
    async mian(){
        this.options=await this.recursionCategory(0,this.options)
    },

    //递归请求类别
    async recursionCategory(ID,children){
        let data=await this.List(ID)
        if(data.length!==0) {
            data.forEach(async item=>{
                children.push({
                    text: item.catalogueName,
                    value: item.catalogueId,
                    children : await this.recursionCategory(item.catalogueId,[])
                })
            })
            return  children
        }else{
            return null
        }
       
        

    },  

    //请求类别
    async List(ID){
     let  {data}=  await  getList({
            ID
     })
     return data.data
    },

    //选择结束后触发
    onFinish({ selectedOptions }) {
      this.show = false;
      this.fieldValue = selectedOptions.map((option) => option.text).join('/');
      this.fieldID = selectedOptions[selectedOptions.length-1].value
    },

    },
   
};
</script>

<style lang="scss" scoped>
#upload{
    width: 100%;
    overflow:hidden;
}
.cell{
    margin-top: 10vh;  
}
.upimg{
    margin: auto;
    margin-top: 1vh;
    width: 90%;
    margin-bottom: 20px;
    padding: 3vw;
    box-shadow:0 0 10px 3px  #7a7a67;
    background: #FFFEF3;
}
.upimg >>> .van-uploader__upload{
    background-color: rgb(174, 0, 0);
}
</style>